<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="content">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input v-model="seach" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="16">
              <el-button plain @click="searchclear">清空</el-button>
              <el-button type="primary" @click="onseach">搜索</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="success" icon="el-icon-edit" @click="addsubjects">添加用户</el-button>
            </el-col>
          </el-row>
          <el-row class="massage" style="line-height:10px" :closable="false">
            <el-alert type="info">
              <template>
                <i class="el-icon-info">共 {{ total }} 条记录</i>
              </template>
            </el-alert>
          </el-row>
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="序号" width="80"></el-table-column>
            <el-table-column prop="subjectName" label="学科" width="180"></el-table-column>
            <el-table-column prop="username" label="创建者" width="180"></el-table-column>
            <el-table-column prop="addDate" align="center" label="创建日期" width="180">
              <template v-slot="{ row }">{{ dayjs(row.addDate).format('YYYY-MM-DD') }}</template>
            </el-table-column>
            <el-table-column prop="isFrontDisplay" label="前台是否显示">
              <template v-slot="{ row }">
                <span v-if="row.isFrontDisplay === 0">否</span>
                <span v-if="row.isFrontDisplay === 1">是</span>
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
            <el-table-column prop="tags" label="标签"></el-table-column>
            <el-table-column prop="totals" label="题目数量"></el-table-column>
            <el-table-column label="操作" width="280">
              <template v-slot="{ row }">
                <el-button type="text" @click="mulu(row)">学科分类</el-button>
                <el-button type="text" @click="xueke(row)">学科标签</el-button>
                <el-button type="text" @click="editsubjects(row)">修改</el-button>
                <el-button type="text" @click="delsubjects(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="massage">
            <el-col :offset="16" :span="8">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.page"
                :page-sizes="[5, 10, 15]"
                :page-size="page.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
          <!-- 添加弹出层 -->
          <el-dialog
            :title="text"
            :visible.sync="dialogVisible"
            width="70%"
            round
            :before-close="handleClose"
          >
            <el-form label-width="120px">
              <el-form-item label="学科名称">
                <el-input v-model="formData.subjectName"></el-input>
              </el-form-item>
              <el-form-item label="是否显示">
                <el-switch v-model="formData.isFrontDisplay" active-value="1" inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="btnok">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { getsubjects, addsubjects, delsubjects, editsubjects } from '@/api/subjects/subjects.js'
export default {
  data() {
    return {
      text: '新增学科',
      list: [],
      page: {
        page: 1,
        pagesize: 10
      },
      formData: {
        subjectName: '',
        isFrontDisplay: 1
      },
      dialogVisible: false,
      seach: '',
      total: 0
    }
  },
  created() {
    this.getsubjects()
  },
  methods: {
    async getsubjects() {
      const { data } = await getsubjects(this.page)
      console.log(data)
      this.list = data.items
      this.total = data.counts
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.getsubjects()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.page = val
      this.getsubjects()
    },
    delsubjects(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delsubjects(id)
        this.$message.success('删除成功!')
        this.getsubjects()
      })
    },
    editsubjects(row) {
      this.text = '修改学科'
      this.formData = row
      console.log(row)
      this.dialogVisible = true
    },
    addsubjects() {
      this.text = '新增学科'
      this.dialogVisible = true
    },
    // 弹窗方法
    handleClose() {
      this.dialogVisible = false
    },
    async btnok() {
      if (this.text === '新增学科') {
        const res = await addsubjects(this.formData)
        console.log(res)
        this.dialogVisible = false
        this.$message.success('添加成功')
        this.getsubjects()
      } else {
        console.log(this.formData)
        await editsubjects(this.formData)
        this.$message.success('修改成功')
        this.getsubjects()
        this.dialogVisible = false
      }
    },
    async onseach() {
      const res = { ...this.page, subjectName: this.seach }
      const { data } = await getsubjects(res)
      this.list = data.items
      this.total = data.counts
    },
    searchclear() {
      this.seach = ''
      this.getsubjects()
    },
    xueke(row) {
      console.log(row)
      // this.$router.push({ path: '/subjects/directorys/', params: row.id })
      this.$router.push(`/subjects/tags/${row.id}`)
    },
    mulu(row) {
      // this.$router.push({ path: '/subjects/tags/', params: row.id })
      this.$router.push(`/subjects/directorys/${row.id}`)
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.content {
  width: 100%;
  height: 100%;
}
.massage {
  margin: 15px;
}
</style>
